<template>
	<div class="less_topic">
		<!--    顶部返回按钮-->
		<div class="head_return" @click="headReturn">
		</div>
		<div class="topic_top">
			<img :src="topimg" alt="">
		</div>
		<div class="topic_con">
			<div class="topic_con_scroll" :class="{topic_con_scroll_anmiton:topic_con_scroll_anmiton}">
				<div class="topic_item" v-for="(v,index) in topicList" :key="index">
					<div class="topic_item_t" :class="{hideAnmition:hideflag}">
						<p>Q{{index +1}}</p>
						<img src="../../assets/image/lesson/answerT.png" alt="">
						<p style="color: #373737">在下方词组中找出不同类<span class="topic_item_span">
								先排除
								<div :class="{showdownline:showdownlinflag,
				donwlinetwink:twinkleflag
				}"></div>
							</span></p>
					</div>
					<div class="topic_item_chose">
						<div class="topic_con_scroll_mask" v-if="maskflag_one"></div>
						<div :class="{ zIndexMax:(n==3&&maskflag_one),
			    answerMove1:(n==4&&hideflag)
			  }" class="topic_item_chose_item_father" v-for="(v,n) in 5">
							<div class="topic_item_chose_item" @click="choseitem(n)" :class="{topic_item_is_chose:n==choseitemFlag,
				  bordertwink:twinkleflag,
				  choseanswerAnmition:(n==3&&maskflag_one),
				  hideAnmition:(n==3&&hideflag)

				  }">单一
								<div class="ch_box" v-if="n==3" :class="{ch_anmition:ch_flag,
				  ch_anmiton_end:ch_end_flag
				  }"></div>
								<div class="hand_gif" v-if="n==3&&handflag_one">
									<img src="../../assets/image/lesson/hand.gif" alt="">
								</div>
							</div>
						</div>

					</div>
					<div class="topic_item_tips" :class="{hideAnmition:hideflag}">
						<span>再概括
							<div :class="{showdownline:showdownlinflag2,
					donwlinetwink:twinkleflag2
					}"></div>
						</span>

					</div>
					<div class="topic_item_p">
						<!-- :class="['item_p_sel', currItemel === i?'curr_item_p_sel': '' ]" -->
						<div class="duigou_box" v-if="duigouflag" :class="{duihaoAnmition:duigouflag}"></div>
						<div class="item_p_sel_father" :class="{zIndexMax:maskflag_two&&i==0,
		   hideAnmition:(i!=0&&hideflag),
		   answerMove2:(i==0&&hideflag)
		   }" v-for="(l,i) in v.list">
							<div class="item_p_sel" :class="{bordertwink:twinkleflag2,
			   choseanswerAnmition2:maskflag_two&&i==0
			   }" @click="changeItemel(i)">
								<div class="target " :class="{targetAnmition:maskflag_two&&i==0
				}"></div>
								<span v-if="!hideflag">{{letterArray[i]}}.</span>
								<span v-if="hideflag">[</span>{{l}}<span v-if="hideflag">]</span>
							</div>
							<div class="hand_gif2" v-if="i==0&&maskflag_two">
								<img src="../../assets/image/lesson/hand.gif" alt="">
							</div>
						</div>
						<div class="topic_con_scroll_mask" v-if="maskflag_two"></div>
					</div>
				</div>

			</div>
			<!--      提交-->
		</div>
		<div class="topic_answer" @click="toAnswerList">
			<img src="../../assets/image/lesson/answer.png" alt="" style="width: 100%; height: 100%;">
		</div>
		<div class="kefu_box">
			<kefu :letters="letters"></kefu>
			<div class="countdown">
				<div :style="{width:countNum}"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import breadth3 from '../../assets/image/lesson/breadth3.png' //阅读实战
	import breadth2 from '../../assets/image/lesson/breadth2.png' //概括力
	import kefu from '../../components/kefu/index.vue'
	export default {
		name: "lessTopic",
		components: {
			kefu
		},
		data() {
			return {
				topimg: breadth2,
				// 请认真看习题演示哦，倒计时结束自动进入答题页。
				letters: '请认真看习题演示哦，倒计时结束自动进入答题页',
				countNum: '',
				timeNo: '',
				timeNo2: '',
				type: null,
				currItemel: -1,
				countDownTime: 0,
				//字母
				letterArray: ['A', 'B', 'C', 'D'],
				// 试题列表
				topicList: [{
					tit: '在下方词组中找出不同类先排除',
					list: ['数量', '数字', '个数', '次数']
				}, ],
				choseitemFlag: -1,
				topic_con_scroll_anmiton: false,
				showdownlinflag: false,
				twinkleflag: false,
				maskflag_one: false,
				handflag_one: false,
				ch_flag: false,
				ch_end_flag: false,
				showdownlinflag2: false,
				twinkleflag2: false,
				maskflag_two: false,
				hideflag: false,
				duigouflag: false
			}
		},
		mounted() {
			this.clearTime()
			this.type = parseInt(this.$route.query.class)
			// this.$emit("closeloading")
			this.renderAnmiton()
		},
		beforeDestroy() {
			this.clearTime()
		},
		methods: {
			clearTime() {
				clearInterval(this.timeNo)
				clearInterval(this.timeNo2)
			},
			toAnswerList() {
				// this.$router.push({path: '/answerList'})
				this.clearTime()
				this.$router.push({
					path: '/lessonAnswer',
					query:{
						type:'wordlogic'
					}
				})
				// this.$emit("showloading",{
				// 	methods:'push',
				// 	path:'/lessonAnswer'
				// })
			},

			choseitem(n) {
				this.choseitemFlag = n
			},
			changeItemel(index) {
				this.currItemel = index
			},
			renderAnmiton() {
				//整个背景逐渐出现   topic_con_scroll_anmiton
				//题目出现下划线     showdownlinflag
				//题目下划线与答案边框开始闪烁   twinkleflag
				//遮罩层出现，显示单个选项， 单个选项由移入状态变成点击状态并出现手指 maskflag_one 控制手指和mask的需要分开 handflag_one
				//出现X号， ch_flag
				//遮罩层消失
				//在概括出现下划线
				//在概括与下边答案边框开始闪烁
				//遮罩层出现，显示单个选项，出现手指
				//出现箭头效果及点击效果
				//隐藏其他选项，出现空白， hideflag
				//汉字开始移动，出现对勾动画

				this.topic_con_scroll_anmiton = true
				var n = -2
				//需要封装一个取消所有动画的函数，否则有的动画会一直执行
				this.timeNo2 = setInterval(() => {
					n = n + 0.5
					if (n == 2) {
						this.countDown(20000)
						this.showdownlinflag = true
					}
					if (n == 4) {
						this.twinkleflag = true
					}
					if (n == 7) {
						this.showdownlinflag = false
						this.twinkleflag = false
						this.maskflag_one = true
						this.handflag_one = true
					}
					if (n == 10) {
						this.choseitemFlag = 3
						this.showdownlinflag = false
						this.twinkleflag = false
						this.handflag_one = false
						this.ch_flag = true
					}
					if (n == 10.5) {
						this.maskflag_one = false
					}
					if (n == 11) {
						this.ch_end_flag = true
					}
					if (n == 12) {
						this.showdownlinflag2 = true
					}
					if (n == 14) {
						this.twinkleflag2 = true
					}
					if (n == 16) {
						this.maskflag_two = true
					}
					if (n == 18) {
						this.topic_con_scroll_anmiton = false,
							this.showdownlinflag = false,
							this.twinkleflag = false,
							this.maskflag_one = false,
							this.handflag_one = false,
							this.ch_flag = false,
							this.ch_end_flag = false,
							this.showdownlinflag2 = false,
							this.twinkleflag2 = false,
							this.maskflag_two = false
						this.hideflag = true
					}
					if (n == 19) {
						this.duigouflag = true
					}
					if (n == 21) {
						this.toAnswerList()
					}
				}, 500)

			},
			countDown(time) {
				var second = parseFloat(time / 1000)
				var average = parseFloat(100 / second)
				console.log(second)
				console.log(average)

				var nowStep = 0
				this.timeNo = setInterval(() => {
					if (nowStep == 100) {
						clearInterval(this.timeNo)
						return
					}
					if (100 - nowStep <= average && nowStep + average >= 100) {
						nowStep = 100
					} else {
						nowStep += average
					}
					this.countNum = nowStep + "%"
				}, 1000)
			},
			// 返回上一页
			headReturn() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style lang="less" scoped>
	.less_topic {
		position: relative;
		height: 100vh;
		font-size: .16rem;
		color: #fff;
		overflow: hidden;
		background: url("../../assets/image/lesson/lesback.png") no-repeat;
		background-size: 100% 100%;

		.head_return {
			position: absolute;
			top: 0.3rem;
			left: 0.4rem;
			width: 0.7rem;
			height: 0.7rem;
			background: url("../../assets/image/lesson/return.png") no-repeat;
			background-size: 100% 100%;
			cursor: pointer;

			&>img {
				width: 100%;
				height: 100%;
			}
		}

		.topic_top {
			position: relative;
			width: 3.66rem;
			margin: -0.4rem auto auto 42%;
			height: 2.06rem;
			// background: url("../../assets/image/lesson/breadth.png") no-repeat;
			background-size: 100% 100%;

			&>img {
				width: 88%;
				height: 100%;
			}
		}

		.topic_answer {
			position: relative;
			margin: 0 auto;
			margin-top: 0.53rem;
			width: 1.93rem;
			height: 0.7rem;
			cursor: pointer;
		}
	}

	.kefu_box {
		width: 2.09rem;
		position: fixed;
		bottom: 1.24rem;
		right: 1.7rem;

		.countdown {
			width: 2.49rem;
			height: 0.62rem;
			position: absolute;
			bottom: 0.34rem;
			left: 50%;
			transform: translateX(-50%);
			background-image: url(../../assets/image/lesson/qujishidi.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;

			&>div {
				position: absolute;
				left: 0;
				top: 0;
				height: 0.62rem;
				background-image: url(../../assets/image/lesson/qujishi.png);
				background-size: 2.49rem 0.62rem;
				background-repeat: no-repeat;
			}
		}
	}

	.topic_con {
		position: relative;
		padding: 0.9rem 1.3rem;
		margin: 0 auto;
		margin-top: 0.23rem;
		width: 10.38rem;
		height: 6.29rem;
		color: #5175df;
		box-sizing: border-box;
		background: url("../../assets/image/lesson/border.png") no-repeat;
		background-size: 100% 100%;

		.topic_con_scroll {
			overflow-y: scroll;
			// height: 100%;

			//火狐浏览器隐藏滚动条
			& {
				scrollbar-color: #9eb0e6 #f7f7f9;
				scrollbar-width: thin;
				scrollbar-track-color: transparent;
				-ms-scrollbar-track-color: transparent;
			}

			/* 设置滚动条的样式 谷歌  */
			&::-webkit-scrollbar {
				// width:12px;
				display: none;
			}

			/* 滚动槽 */
			&::-webkit-scrollbar-track {
				-webkit-box-shadow: inset006pxrgba(223, 224, 229);
				border-radius: 10px;
				display: none;
			}

			/* 滚动条滑块 */
			&::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background: rgba(158, 176, 230);
				-webkit-box-shadow: inset006pxrgba(158, 176, 230);
				display: none;
			}

			&::-webkit-scrollbar-thumb:window-inactive {
				background: rgba(229, 226, 217);
				display: none;
			}

			.topic_item {

				font-size: .21rem;

				.topic_item_t {
					display: flex;

					&>span {
						color: #2175F4;
					}

					&>img {
						margin: 0 .4rem;
						width: 0.75rem;
						height: 0.75rem;
					}

					&>p {}

					.topic_item_span {
						position: relative;

						&>div {
							height: 0.05rem;
							position: absolute;
							background-color: #5B7CE8;
							border-radius: 0.3rem;
							left: 5%;
							bottom: -10%;
							// width: 100%;
						}


					}

				}

				.topic_item_chose {
					margin-top: 0.07rem;
					padding-left: 1.8rem;
					// overflow: hidden;
					height: 0.68rem;

					.topic_item_chose_item_father {
						height: 0.52rem;
						padding: 0.08rem 0.1rem;
						width: 0.92rem;
						border-radius: 0.36rem;
						background: #FFFBF0;
						float: left;
						position: relative;
					}

					.topic_item_chose_item {
						width: 100%;
						height: 100%;
						// padding: 0 0.24rem;
						line-height: 0.48rem;
						font-size: 0.21rem;
						box-sizing: border-box;
						text-align: center;
						// float: left;
						color: #333333;
						border: 0.04rem solid #F3F2EF;
						background: white;
						border-radius: 0.26rem;
						cursor: pointer;
						margin-right: 0.14rem;
						position: relative;

						&>.ch_box {
							width: 0.34rem;
							height: 0.34rem;
							position: absolute;
							right: 0;
							bottom: -0.06rem;
							background-size: 100%;
							background-repeat: no-repeat;
						}

						&>.hand_gif {
							width: 1rem;
							height: 1rem;
							position: absolute;
							bottom: -0.5rem;
							right: -0.5rem;
							z-index: 35;

							&>img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.topic_item_chose_item:hover {
						background: #D2DFF6;
						color: #395DD2;
						border: 0.04rem solid #D2DFF6;
					}

					.topic_item_is_chose {
						background: #5B7CE8;
						color: #FFFFFF;
						border: 0.04rem solid #5B7CE8;
					}
				}

				.topic_item_tips {
					font-size: 0.21rem;
					color: #373737;
					padding-left: 1.85rem;
					margin: 0.34rem 0 0.28rem;
					position: relative;

					&>span {
						position: relative;

						&>div {
							height: 0.05rem;
							position: absolute;
							background-color: #5B7CE8;
							border-radius: 0.3rem;
							left: 0%;
							bottom: -10%;
						}
					}
				}

				.topic_item_p {
					display: flex;
					flex-wrap: wrap;
					margin: .3rem 0;
					padding-left: 1.5rem;

					// position: relative;
					.duigou_box {
						width: 2.08rem;
						height: 2.08rem;
						position: absolute;
						top: 76%;
						left: 50%;
						transform: translate(-50%, -50%);
						background-repeat: no-repeat;
						background-size: 100%;
					}

					.item_p_sel_father {
						position: relative;
						padding: .13rem .4rem;
						border-radius: 0.45rem;
						float: left;
						background: #FFFBF0;
					}

					.hand_gif2 {
						width: 1rem;
						height: 1rem;
						position: absolute;
						bottom: -0.2rem;
						right: 0.3rem;
						z-index: 35;

						&>img {
							width: 100%;
							height: 100%;
						}
					}

					.item_p_sel {
						position: relative;
						// margin: .13rem .4rem;
						padding: 0 .6rem 0 .6rem;
						height: .6rem;
						line-height: .6rem;
						// padding: 0 .86rem 0 0.98rem;
						// height: 0.85rem;
						// line-height: 0.85rem;
						text-align: center;
						color: #333;
						font-size: 0.18rem;
						border: 0.04rem solid #c8c7c4;
						border-radius: 0.45rem;
						cursor: pointer;

						.target {
							position: absolute;
							top: 50%;
							left: 0rem;
							transform: translateY(-55%);
							width: 0.7rem;
							height: 0.76rem;
							background-repeat: no-repeat;
							background-size: 100%, 100%;
						}
					}

					.curr_item_p_sel {
						background: #e8edf3;
					}
				}
			}

			.next_group {
				float: right;
				width: 1.68rem;
				height: 0.66rem;
				cursor: pointer;

				&>img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.topic_progress {
			position: absolute;
			top: -0.4rem;
			left: 0;
			width: 3.8rem;
			height: 1.2rem;
			background: url("../../assets/image/lesson/progress.png");
			background-size: 100% 100%;

			.progress_list {
				display: flex;
				justify-content: space-around;
				position: absolute;
				right: .42rem;
				bottom: .32rem;
				width: 1.96rem;
				height: 0.15rem;
				background: url("../../assets/image/lesson/protime.png");
				background-size: 100% 100%;

				.pro_mask {
					width: 0;
					height: 100%;
					position: absolute;
					right: 0;
					top: 0;
					background: #7e84c8;

					&::before {
						position: absolute;
						left: 0;
						top: -0.2em;
						content: '';
						width: .2rem;
						height: .2rem;
						background: pink;
						border-radius: 50%;
					}
				}
			}
		}

		// 提交
		.submit {
			position: absolute;
			left: 50%;
			bottom: -0.3rem;
			transform: translateX(-50%);
			width: 2rem;
			height: 0.8rem;
			background: url("../../assets/image/lesson/submit.png") no-repeat;
			background-size: 100% 100%;
		}
	}

	//遮罩层
	.topic_con_scroll_mask {
		width: 88%;
		height: 88%;
		border-radius: 5%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: black;
		opacity: 0.7;
		z-index: 20;
	}

	//动画类名-------------------
	//整体渐现
	.topic_con_scroll_anmiton {
		animation-name: downlineShow;
		animation-duration: 2s;
	}

	//出现下划线
	.showdownline {
		animation-name: downline;
		animation-duration: 2s;
		width: 100%;
	}

	//边框开始闪烁
	.bordertwink {
		animation-name: borderblue;
		animation-duration: 1s;
		animation-iteration-count: 3;
	}

	//下划线闪烁与边框闪烁保持一致
	.donwlinetwink {
		animation-name: downlineShow;
		animation-duration: 1s;
		animation-iteration-count: 3;
	}

	//为选项增加权重
	.zIndexMax {
		z-index: 30 !important;
	}

	//叉号动画
	.ch_anmition {
		animation-name: ch;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}

	.ch_anmiton_end {
		background-image: url(../../assets/image/lesson/xh5.png);
	}

	//选中答案动画
	.choseanswerAnmition {
		animation-name: choseanswer;
		animation-duration: 3s;
	}

	.choseanswerAnmition2 {
		animation-name: choseanswer2;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.targetAnmition {

		animation-name: targetAnmition;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.hideAnmition {
		animation-name: hide;
		animation-duration: 1s;
		animation-fill-mode: forwards
	}

	.duihaoAnmition {
		animation-name: dh;
		animation-duration: 3s;
		// animation-fill-mode : forwards;
		animation-iteration-count: infinite;
	}

	//动画效果--------------------
	//渐现
	@keyframes downline {
		0% {
			width: 0%;
		}

		100% {
			width: 100%;
		}
	}

	//箭头动画
	@keyframes targetAnmition {
		0% {
			background-image: url(../../assets/image/lesson/jt1.png);
		}

		16% {
			background-image: url(../../assets/image/lesson/jt2.png);
		}

		32% {
			background-image: url(../../assets/image/lesson/jt3.png);
		}

		48% {
			background-image: url(../../assets/image/lesson/jt4.png);
		}

		64% {
			background-image: url(../../assets/image/lesson/jt5.png);
		}

		80% {
			background-image: url(../../assets/image/lesson/jt6.png);
		}

		100% {
			background-image: url(../../assets/image/lesson/jt7.png);
		}
	}

	//选中答案

	@keyframes choseanswer {
		0% {
			color: #333333;
			border: 0.04rem solid #F3F2EF;
			background: white;
		}

		50% {
			background: #D2DFF6;
			color: #395DD2;
			border: 0.04rem solid #D2DFF6;
		}

		100% {
			background: #5B7CE8;
			color: #FFFFFF;
			border: 0.04rem solid #5B7CE8;
		}
	}

	//下方选中答案

	@keyframes choseanswer2 {
		0% {
			color: #333333;
			border: 0.04rem solid #F3F2EF;
			background: white;
		}

		100% {
			background: #D2DFF6;
			color: #395DD2;
			border: 0.04rem solid #D2DFF6;
		}
	}

	//闪烁
	@keyframes downlineShow {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	//隐藏
	@keyframes hide {

		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	//选择框框线变蓝-----和下划线一致
	@keyframes borderblue {
		0% {
			border: 0.04rem solid #F3F2EF;
		}

		100% {
			border: 0.04rem solid #5B7CE8;
		}

	}

	//叉号动画
	@keyframes ch {
		0% {
			background-image: url(../../assets/image/lesson/xh1.png);
		}

		25% {
			background-image: url(../../assets/image/lesson/xh2.png);
		}

		50% {
			background-image: url(../../assets/image/lesson/xh3.png);
		}

		75% {
			background-image: url(../../assets/image/lesson/xh4.png);
		}

		100% {
			background-image: url(../../assets/image/lesson/xh5.png);
		}
	}

	//对勾动画
	@keyframes dh {
		0% {
			background-image: url(../../assets/image/lesson/dh1.png);
		}

		7.6% {
			background-image: url(../../assets/image/lesson/dh2.png);
		}

		15.2% {
			background-image: url(../../assets/image/lesson/dh3.png);
		}

		22.8% {
			background-image: url(../../assets/image/lesson/dh4.png);
		}

		30.4% {
			background-image: url(../../assets/image/lesson/dh5.png);
		}

		38% {
			background-image: url(../../assets/image/lesson/dh6.png);
		}

		45.6% {
			background-image: url(../../assets/image/lesson/dh7.png);
		}

		53.2% {
			background-image: url(../../assets/image/lesson/dh8.png);
		}

		60.8% {
			background-image: url(../../assets/image/lesson/dh9.png);
		}

		68.4% {
			background-image: url(../../assets/image/lesson/dh10.png);
		}

		76% {
			background-image: url(../../assets/image/lesson/dh11.png);
		}

		83.6% {
			background-image: url(../../assets/image/lesson/dh12.png);
		}

		91.2% {
			background-image: url(../../assets/image/lesson/dh13.png);
		}

		100% {
			background-image: url(../../assets/image/lesson/dh14.png);
		}
	}

	.answerMove1 {
		transition: all 1s;
		transform: translateX(-1rem);
	}

	.answerMove2 {
		transition: all 1s;
		transform: translate(1rem, -0.5rem) scale(1.3);

		&>.item_p_sel {
			border: 0rem solid white !important;
		}
	}
</style>
